<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uTools - 高效生产力助手</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .plugin-card {
            transition: all 0.3s ease;
        }
        .plugin-card:hover {
            transform: scale(1.03);
        }
        .mermaid-tooltip {
            position: absolute;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 100;
        }
        .footer-link:hover {
            color: #a5b4fc;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="text-2xl font-bold text-indigo-600">
                        <i class="fas fa-bolt mr-2"></i>uTools
                    </div>
                </div>
                <div class="flex items-center">
                    <a href="https://www.u-tools.cn/" target="_blank" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-600 hover:bg-indigo-50 transition-colors duration-200">
                        官方网站 <i class="fas fa-external-link-alt ml-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero 区域 -->
    <section class="hero text-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">重新定义您的工作方式</h1>
                    <p class="text-xl mb-8 opacity-90">uTools 是一款跨平台的效率工具集合，采用现代化设计理念，致力于成为您高效生产力的得力助手。</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://www.u-tools.cn/" target="_blank" class="bg-white text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-semibold transition-all duration-200 shadow-md hover:shadow-lg">
                            下载体验 <i class="fas fa-download ml-2"></i>
                        </a>
                        <a href="#features" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-semibold transition-all duration-200">
                            了解更多 <i class="fas fa-arrow-down ml-2"></i>
                        </a>
                    </div>
                </div>
                <div class="lg:w-1/2">
                    <img src="https://www.u-tools.cn/static/img/utools-intro.png" alt="uTools 界面展示" class="rounded-xl shadow-2xl border-8 border-white border-opacity-20">
                </div>
            </div>
        </div>
    </section>

    <!-- 主要特点 -->
    <section id="features" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">为什么选择 uTools?</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">一款工具，无限可能。uTools 通过创新设计让您的工作效率倍增。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 特点卡片 1 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-500 text-4xl mb-6">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">超级搜索</h3>
                    <p class="text-gray-600">通过快捷键呼出搜索框，快速查找和启动本地应用、搜索网络信息，让一切触手可及。</p>
                </div>
                
                <!-- 特点卡片 2 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-500 text-4xl mb-6">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">丰富的插件生态</h3>
                    <p class="text-gray-600">数百种实用插件覆盖开发工具、生产力工具、系统工具等各个领域，满足您的各种需求。</p>
                </div>
                
                <!-- 特点卡片 3 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-500 text-4xl mb-6">
                        <i class="fas fa-laptop"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">跨平台支持</h3>
                    <p class="text-gray-600">兼容 Windows、macOS 和 Linux 系统，提供一致的使用体验，无论在哪里工作都同样高效。</p>
                </div>
                
                <!-- 特点卡片 4 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-500 text-4xl mb-6">
                        <i class="fas fa-keyboard"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">快捷命令</h3>
                    <p class="text-gray-600">通过简单的指令快速执行常用操作，摆脱复杂的菜单导航，让操作更加直接高效。</p>
                </div>
                
                <!-- 特点卡片 5 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-500 text-4xl mb-6">
                        <i class="fas fa-clipboard"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能文本识别</h3>
                    <p class="text-gray-600">自动识别剪贴板内容，推荐相应的工具进行处理，智能化提升工作效率。</p>
                </div>
                
                <!-- 特点卡片 6 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300 border border-gray-100">
                    <div class="text-indigo-500 text-4xl mb-6">
                        <i class="fas fa-cog"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">自定义设置</h3>
                    <p class="text-gray-600">支持高度个性化配置，适应不同用户的使用习惯，打造属于您的高效工作台。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据可视化 -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">uTools 核心工作流</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">一键呼出，快速处理，无缝衔接您的工作流程</p>
            </div>
            
            <div class="mermaid bg-white p-8 rounded-xl shadow-md">
                graph TD
                A[按下 Alt+Space] --> B[输入关键词]
                B --> C{自动识别}
                C -->|应用| D[快速启动应用]
                C -->|文本| E[智能推荐工具]
                C -->|命令| F[执行快捷操作]
                D --> G[完成任务]
                E --> G
                F --> G
            </div>
        </div>
    </section>

    <!-- 插件类别 -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">强大的插件生态系统</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">丰富多样的插件，满足您的各种专业需求</p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 开发者工具 -->
                <div class="plugin-card bg-gradient-to-br from-indigo-50 to-purple-50 p-6 rounded-xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-code text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg">开发者工具</h3>
                    </div>
                    <ul class="text-gray-700 space-y-2">
                        <li><i class="fas fa-check-circle text-indigo-500 mr-2"></i> 编码工具</li>
                        <li><i class="fas fa-check-circle text-indigo-500 mr-2"></i> API 文档</li>
                        <li><i class="fas fa-check-circle text-indigo-500 mr-2"></i> 正则表达式</li>
                        <li><i class="fas fa-check-circle text-indigo-500 mr-2"></i> JSON 格式化</li>
                    </ul>
                </div>
                
                <!-- 系统工具 -->
                <div class="plugin-card bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-desktop text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg">系统工具</h3>
                    </div>
                    <ul class="text-gray-700 space-y-2">
                        <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> 文件查找</li>
                        <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> 截图</li>
                        <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> 录屏</li>
                        <li><i class="fas fa-check-circle text-blue-500 mr-2"></i> OCR 识别</li>
                    </ul>
                </div>
                
                <!-- 文本工具 -->
                <div class="plugin-card bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-font text-green-600 text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg">文本工具</h3>
                    </div>
                    <ul class="text-gray-700 space-y-2">
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i> 翻译</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i> 文本对比</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i> Markdown 编辑</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i> 文字处理</li>
                    </ul>
                </div>
                
                <!-- 实用工具 -->
                <div class="plugin-card bg-gradient-to-br from-yellow-50 to-amber-50 p-6 rounded-xl shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-yellow-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-tools text-yellow-600 text-xl"></i>
                        </div>
                        <h3 class="font-bold text-lg">实用工具</h3>
                    </div>
                    <ul class="text-gray-700 space-y-2">
                        <li><i class="fas fa-check-circle text-yellow-500 mr-2"></i> 快递查询</li>
                        <li><i class="fas fa-check-circle text-yellow-500 mr-2"></i> 天气预报</li>
                        <li><i class="fas fa-check-circle text-yellow-500 mr-2"></i> 日历提醒</li>
                        <li><i class="fas fa-check-circle text-yellow-500 mr-2"></i> 生活服务</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用场景 -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">适合各种专业场景</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">无论您是开发者、设计师还是普通用户，uTools 都能提升您的工作效率</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 开发者 -->
                <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100">
                    <div class="flex items-center mb-6">
                        <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-code text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold">开发者</h3>
                    </div>
                    <p class="text-gray-600 mb-4">快速查阅 API 文档、格式化 JSON、调试正则表达式、编码转换等，让开发工作更加流畅高效。</p>
                    <ul class="text-gray-700 space-y-2">
                        <li><i class="fas fa-check text-indigo-500 mr-2"></i> 快速启动开发环境</li>
                        <li><i class="fas fa-check text-indigo-500 mr-2"></i> 即时查阅技术文档</li>
                        <li><i class="fas fa-check text-indigo-500 mr-2"></i> 代码片段管理</li>
                        <li><i class="fas fa-check text-indigo-500 mr-2"></i> 快速测试 API 接口</li>
                    </ul>
                </div>
                
                <!-- 设计师 -->
                <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100">
                    <div class="flex items-center mb-6">
                        <div class="bg-pink-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-paint-brush text-pink-600 text-xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold">设计师</h3>
                    </div>
                    <p class="text-gray-600 mb-4">快速取色、图片处理、尺寸转换、素材搜索等工具，让设计工作更加得心应手。</p>
                    <ul class="text-gray-700 space-y-2">
                        <li><i class="fas fa-check text-pink-500 mr-2"></i> 屏幕取色工具</li>
                        <li><i class="fas fa-check text-pink-500 mr-2"></i> 图片压缩处理</li>
                        <li><i class="fas fa-check text-pink-500 mr-2"></i> 设计素材搜索</li>
                        <li><i class="fas fa-check text-pink-500 mr-2"></i> 快速截图标注</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 操作指南 -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">简单易用的操作方式</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">几个简单步骤，即可享受高效工作体验</p>
            </div>
            
            <div class="flex flex-col space-y-8">
                <!-- 步骤1 -->
                <div class="flex flex-col md:flex-row items-center">
                    <div class="bg-indigo-100 text-indigo-700 h-12 w-12 rounded-full flex items-center justify-center text-2xl font-bold mb-4 md:mb-0 md:mr-8">
                        1
                    </div>
                    <div class="flex-1 bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-bold mb-3">呼出主界面</h3>
                        <p class="text-gray-700">使用快捷键 <span class="bg-gray-200 px-2 py-1 rounded text-sm font-mono">Alt+Space</span> (可自定义) 呼出 uTools 主界面。</p>
                    </div>
                </div>
                
                <!-- 步骤2 -->
                <div class="flex flex-col md:flex-row items-center">
                    <div class="bg-indigo-100 text-indigo-700 h-12 w-12 rounded-full flex items-center justify-center text-2xl font-bold mb-4 md:mb-0 md:mr-8">
                        2
                    </div>
                    <div class="flex-1 bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-bold mb-3">输入关键词</h3>
                        <p class="text-gray-700">直接输入您想执行的操作关键词，如应用名称、功能名称或特定命令。</p>
                    </div>
                </div>
                
                <!-- 步骤3 -->
                <div class="flex flex-col md:flex-row items-center">
                    <div class="bg-indigo-100 text-indigo-700 h-12 w-12 rounded-full flex items-center justify-center text-2xl font-bold mb-4 md:mb-0 md:mr-8">
                        3
                    </div>
                    <div class="flex-1 bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-bold mb-3">选择功能</h3>
                        <p class="text-gray-700">从搜索结果中选择合适的应用或功能，或者使用自动推荐的插件工具。</p>
                    </div>
                </div>
                
                <!-- 步骤4 -->
                <div class="flex flex-col md:flex-row items-center">
                    <div class="bg-indigo-100 text-indigo-700 h-12 w-12 rounded-full flex items-center justify-center text-2xl font-bold mb-4 md:mb-0 md:mr-8">
                        4
                    </div>
                    <div class="flex-1 bg-gray-50 p-6 rounded-lg border border-gray-200">
                        <h3 class="text-xl font-bold mb-3">完成任务</h3>
                        <p class="text-gray-700">在插件中完成您的任务，然后关闭界面继续您的工作，无需打断原有流程。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 行动号召 -->
    <section class="py-20 bg-indigo-600 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold mb-6">立即体验高效工作方式</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto opacity-90">uTools 是您提升生产力的终极选择，让工作变得更简单、更高效。</p>
            <a href="https://www.u-tools.cn/" target="_blank" class="inline-block bg-white text-indigo-600 hover:bg-indigo-50 px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-200 shadow-lg hover:shadow-xl">
                免费下载 <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col items-center">
                <div class="text-2xl font-bold mb-4">
                    <i class="fas fa-book text-indigo-400 mr-2"></i> 技术小馆
                </div>
                <div class="text-gray-400 mb-6 text-center">
                    分享前沿技术，探索高效工具
                </div>
                <div class="text-gray-400 hover:text-white transition-colors duration-200 footer-link">
                    <a href="http://www.yuque.com/jtostring" target="_blank">
                        <i class="fas fa-globe mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 初始化 Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>